<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, FreeMode } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";

const props = defineProps({
  inviteList: {
    type: Array,
    default: [],
  },
});

const business = ref([]);
const modules = [Autoplay, FreeMode];
const swiper = ref(null);
const lastNeedSwiperSpeed = ref(null);
const containerRef = ref(null);
const slideWidth = 154; // 图片宽度
const spaceBetween = 80; // 间距

function calcSlidesPerView() {
  if (!containerRef.value) return 1;
  const containerWidth = containerRef.value.offsetWidth;
  // 计算一屏能放多少个slide
  return Math.floor(
    (containerWidth + spaceBetween) / (slideWidth + spaceBetween)
  );
}

function ensureBusinessLength() {
  nextTick(() => {
    const slidesPerView = calcSlidesPerView();
    // 增加倍数，从3倍改为5倍，提供更多的slide数量
    const minCount = slidesPerView * 5;
    if (business.value.length < minCount) {
      // 循环补足到最少数量
      const origin = business.value.slice(); // 复制原始数组
      if(origin.length == 0) return;
      const times = Math.ceil(minCount / origin.length);
      business.value = Array(times)
        .fill(0)
        .flatMap(() => origin)
        .slice(0, minCount);
    }
  });
}

// 启动自动播放的函数
function startAutoplay() {
  nextTick(() => {
    if (swiper.value && business.value.length > 0) {
      swiper.value.autoplay.start();
    }
  });
}

watch(
  () => props.inviteList,
  (newVal) => {
    business.value = newVal || [];

    // 数据更新后，确保有足够的slide并启动自动播放
    if (business.value.length > 0) {
      ensureBusinessLength();
      startAutoplay();
    }
  },
  { immediate: true, deep: true }
);

onMounted(() => {
  ensureBusinessLength();
  window.addEventListener("resize", ensureBusinessLength);

  // 如果数据已经存在，立即启动自动播放
  if (business.value.length > 0) {
    startAutoplay();
  }
});

onUnmounted(() => {
  window.removeEventListener("resize", ensureBusinessLength);
});

const onSwiper = (ins) => {
  swiper.value = ins;
  // Swiper实例创建后，如果有数据就启动自动播放
  if (business.value.length > 0) {
    startAutoplay();
  }
};

const onMourseEnter = () => {
  if (!swiper.value) return;
  lastNeedSwiperSpeed.value =
    (Math.abs(
      Math.abs(swiper.value.getTranslate()) - Math.abs(swiper.value.translate)
    ) /
      (225 + swiper.value.params.spaceBetween)) *
    // 调整悬停时的速度计算
    swiper.value.params.speed *
    0.3; // 降低悬停恢复速度
  swiper.value.setTranslate(swiper.value.getTranslate());
  swiper.value.autoplay.stop();
};

const onMouseLeave = () => {
  if (!swiper.value) return;
  swiper.value.slideTo(swiper.value.activeIndex, lastNeedSwiperSpeed.value);
  swiper.value.autoplay.start();
};
</script>

<template>
  <div class="guarantee" ref="containerRef">
    <Swiper
      v-if="business.length > 0"
      :observer="true"
      :observeParents="true"
      :allowTouchMove="false"
      :speed="6000"
      :loop="true"
      :slidesPerView="'auto'"
      :spaceBetween="70"
      :freeMode="true"
      :autoplay="{
        delay: 0,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      }"
      :modules="modules"
      @mouseenter="onMourseEnter"
      @mouseleave="onMouseLeave"
      @swiper="onSwiper"
    >
      <SwiperSlide v-for="(item, idx) in business" :key="idx">
        <img class="business-img" :src="item.linkUrl" alt="" />
      </SwiperSlide>
    </Swiper>
  </div>
</template>

<style>
.guarantee {
  position: relative;
  z-index: 1;
  padding: 75px 0;
  box-sizing: border-box;
}

.guarantee .swiper-slide {
  width: -moz-max-content !important;
  width: max-content !important;
}

.guarantee .swiper-wrapper {
  -o-transition-timing-function: linear;
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.business-img {
  /* width: 147px; */
  height: 80px;
  object-fit: cover;
}
</style>
